<template>
  <div>
    <NavHeader></NavHeader>
    <div class="nav_side">
        <el-button class="back" @click="back()">返回空间</el-button>
        <div><img class='n_photo' src="../assets/imgs/source.jpeg"></div>
        <p class="n_name">Javascript教程</p>
        <ul>
          <li tabIndex="1" class="n_card" @click="showC()"><i class="el-icon-s-unfold icon"></i>课程资料</li>
          <li tabIndex="2" class="n_card" @click="showH()"><i class="el-icon-document icon"></i>作业</li>
          <li tabIndex="3" class="n_card" @click="showT()"><i class="el-icon-edit icon"></i>考试</li>
          <li tabIndex="4" class="n_card" @click="showTK()"><i class="el-icon-edit icon"></i>讨论</li>
        </ul>
    </div>
    <div class="nav_box">
      <div class="content">
        <CourseDetail v-if="showCourseDetail"></CourseDetail>
        <HomeWork v-if="showHomeWork"></HomeWork>
        <Test v-if="showTest"></Test>
        <Talk v-if="showTalk"></Talk>
      </div>
    </div>
  </div>
</template>

<script>
import NavHeader from '../components/NavHeader.vue'
import CourseDetail from '../components/CourseDetail.vue'
import HomeWork from '../components/HomeWork.vue'
import Test from '../components/Test.vue'
import Talk from '../components/Talk.vue'
export default {
  name:'course',
    components:{
      NavHeader,
      CourseDetail,
      HomeWork,
      Test,
      Talk,
    },
    data(){
      return{
        showCourseDetail:true,
        showHomeWork:false,
        showTest:false,
        showTalk:false,
      }
    },
    methods:{
      showC(){
        this.showCourseDetail = true
        this.showHomeWork = false
        this.showTest = false
        this.showTalk = false
      },
      showH(){
        this.showCourseDetail = false
        this.showHomeWork = true
        this.showTest = false
        this.showTalk = false
      },
      showT(){
        this.showCourseDetail = false
        this.showHomeWork = false
        this.showTest = true
        this.showTalk = false
      },
      showTK(){
        this.showCourseDetail = false
        this.showHomeWork = false
        this.showTest = false
        this.showTalk = true
      },
      back(){
        this.$router.go(-1)
      }
    }
}
</script>

<style lang="scss">
    .nav_side{
      width: 12.5%;
      height: 100%;
      background-color: #ffffff;
      overflow: hidden;
      position: fixed;
      padding-top: 44px;
      left: 0;
      top: 0px;
      box-shadow: 2px 0 10px 0 rgb(237 238 240 / 50%);
      z-index: 2;
      .back{
        margin-left: 18%;
        margin-top: 10px;
      }
      .n_photo{
        width: 70%;
        height: 80px;
        margin-top: 50px;
        margin-left: 20px;
        border-radius: 10px;
      }
      .n_name{
        width: 70%;
        height: auto;
        font-size: 18px;
        margin-left: 20px;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid #ccc;
        text-align: center;
      }
      .n_card{
        width: 100%;
        height: 54px;
        line-height: 54px;
        font-size:16px;
        padding-left:47px;
        cursor: pointer;    
        .icon{
          margin-right: 5px;
        }
      }
      .n_card:hover{
        color: #3B90FF;
        background-color: #F0F6FF;
      }
      .n_card:focus{
        color: #3B90FF;
        background-color: #F0F6FF;
      }
    }
    .nav_box{
      width: 87.5%;
      min-height: 100%;
      height: auto;
      position: absolute;
      top: 44px;
      left: 180px;
      box-sizing: border-box;
      padding: 60px 40px 40px 40px;
      background-color: #f3f4f7;
    }
</style>